<template>
  <view class="remote jh-column jh-flex-center" :style="[mainStyle]">
    <view class="jh-row jh-align-center">
      <image class="remote-img1" :src="ossDomain + '/call-home.png'"></image>
      <image class="remote-img2" :src="ossDomain + '/call-signal.png'"></image>
      <image class="remote-img1" :src="ossDomain + '/call-service.png'"></image>
    </view>
    <view class="jh-row jh-space-between padding-t15">
      <view class="u-col jh-flex-center" @touchstart='audioTap = true' @tap="getStaff(1)" @touchend="audioTap = false">
        <image class="remote-img3" :src="ossDomain + '/icon-audio'+(audioTap ? '-a' : '')+'.png'"></image>
        <jh-text type="Bold" size="11" value="语音通话" :color="audioTap ? '#008399' : '#333'"></jh-text>
      </view>
      <view class="u-col jh-flex-center" style="padding-left: 60px;" @touchstart='videoTap = true' @tap="getStaff(2)" @touchend="videoTap = false">
        <image class="remote-img3" :src="ossDomain + '/icon-video'+(videoTap ? '-a' : '')+'.png'"></image>
        <jh-text type="Bold" size="11" value="语音通话" :color="videoTap ? '#008399' : '#333'"></jh-text>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    props: {
      mainStyle: {
        type: Object,
        default: ''
      }
    },
    computed: {
      viewWidth () {
        let width = parseInt(this.mainStyle.width)
        width = Number(String(width)[0] + '00')
        return width + 8
      },
      viewHeight () {
        return parseInt(this.mainStyle.height)
      }
    },
    data() {
      return {
        ossDomain: uni.ossDomain,
        audioTap: false,
        videoTap: false,
      }
    },
    mounted() {
    },
    methods: {
      getStaff (type) {
        uni.$http.getStaff({type: 14}).then(res => {
          let to = res.data.tencent_user_id
          // #ifndef APP-PLUS
            return uni.showToast({
              title: '无法呼叫客服',
              icon: 'none'
            })
          // #endif
          uni.$emit("call", {
            type: 1,
            user: to,
            calltype: type,
          });
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .remote{
    position: relative;
    &-img1{
      width: 94px;
      height: 94px;
    }
    &-img2{
      width: 167px;
      height: 50px;
      margin: 0 6px;
    }
    &-img3{
      width: 36px;
      height: 36px;
    }
  }
</style>
